import QtQuick 2.0

Item {
    Rectangle {  // children[0]
        width: parent.width
        height: parent.height
        opacity: 0.5
        color: "black"
        MouseArea {
            anchors.fill: parent
            onClicked:  {
                helpContent.visible = false;
            }
        }
    }

    Item {  //children[1]
        id: helpSideButton
        Rectangle {
            id: line01
            x: content.x - 10
            y: top_menu.y + top_menu.height + 25
            width: 30
            height: 3
            color: "white"
        }
        Rectangle {
            id: line02
            x: content.x - 10
            y: top_menu.y + top_menu.height + content.height
            width: 30
            height: 3
            color: "white"
        }
        Rectangle {
            id: line03
            x: content.x + 20
            y: top_menu.y + top_menu.height + 25
            width: 3
            height: line02.y - line01.y + 3
            color: "white"
        }
        Rectangle {
            id: line04
            x: content.x + 20
            y: (line02.y + line01.y)/2
            width: 30
            height: 3
            color: "white"
            Text {
                x: parent.width +5
                y: -8
                text: "Category Selection"
                color: "white"
                font { family: "Verdana"; pointSize: 16;}
            }
        }
    }

    Item { // children[2]
        id: helpCalendar
        //visible: false
        Rectangle {
            id: circle01
            x: 960
            y: 526
            width: 200
            height: width/2
            radius: height*0.5
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line05
            x: circle01.x + circle01.width/2
            y: circle01.y + circle01.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line05.x
            y: line05.y+line05.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Click on see details"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { // children[3]
        id: bottomButtons
        Rectangle {
            id: button01
            x: 1475
            y: 952
            width: 120
            height: width
            radius: width*0.5
            color: "transparent"
            border.color: "white"
            border.width: 2
            //anchors.centerIn: touchInput
        }
        Rectangle {
            id: line06
            x: button01.x + button01.width/2
            y: button01.y - 20
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line06.x
            y: line06.y-10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Touch screen"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }

        Rectangle {
            id: button02
            x: 1613
            y: 952
            width: 120
            height: width
            radius: width*0.5
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line07
            x: button02.x + button02.width/2
            y: button02.y - 20
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line07.x
            y: line07.y-10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Motion capture"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }

        Rectangle {
            id: button03
            x: 1751
            y: 952
            width: 120
            height: width
            radius: width*0.5
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line08
            x: button03.x + button03.width/2
            y: button03.y - 20
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line08.x
            y: line08.y-10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Speech"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[4]
        id: helpMusic
        Rectangle {
            id: circle02
            x: content.x+70
            y: 625
            width: 500
            height: width/6
            radius: height*0.5
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line09
            x: circle02.x + circle02.width/2
            y: circle02.y + circle02.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line09.x
            y: line09.y+line09.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Select the song to play by clicking the title"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }

        Rectangle {
            id: circle03
            x: content.x+70
            y: 180
            width: 400
            height: width/5
            radius: height*0.5
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line10
            x: circle03.x + circle03.width/2
            y: circle03.y + circle03.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line10.x
            y: line10.y+line10.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Play, Pause and Stop"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[5]
        id: helpNewsMapsGames
        Rectangle {
            id: circle04
            x: content.x+30
            y: 170
            width: 220
            height: width
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line11
            x: circle04.x + circle04.width/2
            y: circle04.y + circle04.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line11.x
            y: line11.y+line11.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Click on to launch the App"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[6]
        id: helpRecipes
        Rectangle {
            id: circle05
            x: content.x+235
            y: 220
            width: 200
            height: width
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line12
            x: circle05.x + circle05.width/2
            y: circle05.y + circle05.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line12.x
            y: line12.y+line12.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Click on to find more dish"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[7]
        id: helpAppliances
        Rectangle {
            id: circle06
            x: content.x+180
            y: 160
            width: 200
            height: width+30
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line13
            x: circle06.x + circle06.width/2
            y: circle06.y + circle06.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line13.x
            y: line13.y+line13.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Click on to turn off the fridger"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }

        Rectangle {
            id: circle07
            x: content.x+940
            y: 160
            width: 500
            height: 180
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line14
            x: circle07.x + circle07.width/2
            y: circle07.y + circle07.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line14.x
            y: line14.y+line14.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Timer"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[8]
        id: helpSocial
        Rectangle {
            id: circle08
            x: content.x+15
            y: 130
            width: 930
            height: 500
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line15
            x: circle08.x + circle08.width/2
            y: circle08.y + circle08.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line15.x
            y: line15.y+line15.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Users can get the latest tweets dynamically."
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[9]
        id:helpNotes
        Rectangle {
            id: circle09
            x: content.x+1440
            y: 120
            width: 230
            height: 60
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line16
            x: circle09.x + circle09.width/2
            y: circle09.y + circle09.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line16.x
            y: line16.y+line16.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Click on to create notes"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[10]
        id:helpList
        Rectangle {
            id: circle10
            x: content.x+200
            y: 100
            width: 600
            height: 400
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line17
            x: circle10.x + circle10.width/2
            y: circle10.y + circle10.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line17.x
            y: line17.y+line17.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Scan your food and get detail information here!"
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }

    Item { //children[11]
        id:helpSettings
        Rectangle {
            id: circle11
            x: content.x+30
            y: 160
            width: 600
            height: 250
            radius: height*0.1
            color: "transparent"
            border.color: "white"
            border.width: 2
        }
        Rectangle {
            id: line18
            x: circle11.x + circle11.width/2
            y: circle11.y + circle11.height -10
            width: 3
            height: 30
            color: "white"
        }
        Rectangle {
            x: line18.x
            y: line18.y+line18.height+10
            color: "transparent"
            Text {
                anchors.centerIn: parent
                text: "Click on to see more options on the right."
                color: "white"
                font { family: "Verdana"; pointSize: 14;}
            }
        }
    }
}
